<!DOCTYPE html>
<html>
<head>
  <script src="../../processing.js"></script>
  <script src="../init.js"></script>
  <script type="text/javascript" src="loadxmldoc.js"></script>
 <!--W3Schools and http://articles.sitepoint.com/article/server-side-xml-javascript for Javascript/XML refresher --> 
<!-- <link rel="stylesheet" href="../style.css"/>--> 
<script type="text/javascript">
xmlDoc=loadXMLDoc("amazonb.xml");
</script>
<title>Cloud of Thoughts - Seeing how I think</title>
</head>
<body>

<script type="text/javascript">

/*
document.write(xmlDoc.getElementsByTagName("review")[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(xmlDoc.getElementsByTagName("date")[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(xmlDoc.getElementsByTagName("rating")[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(xmlDoc.getElementsByTagName("text")[0].childNodes[0].nodeValue);
*/
var title = new Array();  //(xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue);
var date = new Array();   //(xmlDoc.getElementsByTagName("date")[0].childNodes[0].nodeValue);
var nam = new Array();   //(xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue);
var rating = new Array(); //(xmlDoc.getElementsByTagName("rating")[0].childNodes[0].nodeValue);
var tex = new Array();   //(xmlDoc.getElementsByTagName("text")[0].childNodes[0].nodeValue);
var k=xmlDoc.getElementsByTagName("title");
for (i = 0; i <= k.length; i++)
{
title[i]=(xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue);
date[i]=(xmlDoc.getElementsByTagName("date")[i].childNodes[0].nodeValue);
nam[i]=(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue);
rating[i]=(xmlDoc.getElementsByTagName("rating")[i].childNodes[0].nodeValue);
tex[i]=(xmlDoc.getElementsByTagName("text")[i].childNodes[0].nodeValue);
}



</script>


<!--Based on code from Keith Peters (www.bit-101.com): Bouncy Bubbles - 
http://processing.org/learning/topics/bouncybubbles.html 
- Multiple-object collision.-->
<script type="application/processing">

  int colorh = 255;
  int colorb = 255;
  int colors = 255;
  println(title[0]);
println(date[0]);
println(nam[0]);
println(rating[0]);
println(tex[0]);
/* 
   I wish I had a piece of code from an undergrad summer course I once took. We literally read in XML
   and its children w/ Javascript. But, even though I've solved this problem once before, I'm having
   a moment of "Bwuh? How do I do this...?"
*/
var x=xmlDoc.getElementsByTagName("title");
//int numBalls = x.length;
int numBalls = 9;
int bgcolora = 75;
int value = 0;
int sel = 0;
float spring = 0.35;
float gravity = 0.01;
Ball[] balls = new Ball[numBalls];
//Data[] datas = new Data[numBalls];
/*
I am going to have to spider through the data into an array of strings so that way it can be spidered
through when being put into a format that processing.js can understand and manipulate SO THAT WAY
the data can be accessed... assuming I can get the rightclick data print()...ing thing to work

Probably have a keypressed function for clearing the... huh. How does one clear the output? Maybe have
it go to a second canvas or a textbox, and then clear that? I doubt it's the worst of my concerns, atm.

*/

//float bx;
//float by;

//boolean bover = false;
//boolean locked = false;

void setup() 
{
  size(700, 400);
  noStroke();
//  bx = width/2.0;
//  by = height/2.0;
//  ellipseMode(CENTER_RADIUS);  
  smooth();
  for (int i = 0; i < numBalls; i++) {
    balls[i] = new Ball(random(width), random(height), random(20, 40), i, balls);

    // will have to send document string that matches i... like review[i], title[i], etc.
	//datas[i] = new Data(review[i], title[i], date[i], name[i], rating[i], text[i]);
  }
}

void draw() 
{
/*  if(keyPressed) {
    if (key == 'r' || key == 'R') {
		bgcolor="red";
    }
*/
//  float radi=balls[i].diameter;  //Might try to get working later....
  background(value, value/2, bgcolora);
  for (int i = 0; i < numBalls; i++) {
    float radi=balls[i].diameter-5;
    balls[i].collide();
    balls[i].move();
    balls[i].display();  
	if( dist(balls[i].x,balls[i].y,mouseX,mouseY) < radi ){
	   println(title[i]);
	println(date[i]);
	println(nam[i]);
	println(rating[i]);
	println(tex[i]);
      // Change stroke color to unique color.
      stroke(153);
      // Remember user has circle "selected"  
      sel=1;
      // If user has mouse down and is moving...
      /*if(dragging){
        // Move circle to circle position
        e[j][0]=mouseX;
        e[j][1]=mouseY;
      }*/
    }else{
	 fill(colorh, colorb, colors);
	 noStroke();
	 sel=0;
	}
	/*balls[i].freeze();
	This would check to see if the ball's x+r, x-r, y+r, or y-r match the MouseX or MouseY. If so, vx & vy = 0 (also stroke!)
	Maybe some sort of lock/release type thingy. And maybe mousePressed && mouseButton == left? Just to super secure the locking
	mechanism for safety?
	   (r being d/2... or d/4 don't want a weird clustering thing going on.)
	   ...or canonical method.
	*/
  }
}

void keyPressed() 
{
int ran = random(255);
if (key == 'r' || key == 'R') {
      if(value != ran) {
      value=ran;
	  bgcolora=ran/random(5);
	  colorh=value/2 + random(75);
	  colorb=random(255);
	  colors=random(255);
      } else {
       value = 0;
      }
  }
}

/*
void mousePressed() {
  if(bover) { 
    locked = true; 
    fill(255, 255, 255);
  } else {
    locked = false;
  }
  bdifx = mouseX-bx; 
  bdify = mouseY-by; 

}

void mouseDragged() {
  if(locked) {
    bx = mouseX-bdifx; 
    by = mouseY-bdify; 
  }
}

void mouseReleased() {
  locked = false;
}
*/

/*
class Data{
string re;
string ti;
string da;
string na;
string ra;
string te;

Data(string rein, string tiin, string dain, string nain, string rain, string tein){
   re = rein;
   ti = tiin;
   da = dain;
   na = nain;
   ra = rain;
   te = tein;
   }
}
*/

class Ball {
  float x, y;
  float diameter;
  float vx = 0;
  float vy = 0;
  int id;
  Ball[] others;
 
  Ball(float xin, float yin, float din, int idin, Ball[] oin) {
    x = xin;
    y = yin;
    diameter = din;
    id = idin;
    others = oin;
  } 
  
  
  
  void collide() {
    for (int i = id + 1; i < numBalls; i++) {
      float dx = others[i].x - x;
      float dy = others[i].y - y;
      float distance = sqrt(dx*dx + dy*dy);
      float minDist = others[i].diameter/2 + diameter/2;
      if (distance < minDist) { 
        float angle = atan2(dy, dx);
        float targetX = x + cos(angle) * minDist;
        float targetY = y + sin(angle) * minDist;
        float ax = (targetX - others[i].x) * spring;
        float ay = (targetY - others[i].y) * spring;
        vx -= ax;
        vy -= ay;
        others[i].vx += ax;
        others[i].vy += ay;
      }
    }   
  }
  
  void move() {
    vy += gravity;
    x += vx;
    y += vy;
    if (x + diameter/2 > width) {
      x = width - diameter/2;
      vx += -0.9; 
    }
    else if (x - diameter/2 < 0) {
      x = diameter/2;
      vx *= -0.9;
    }
    if (y + diameter/2 > height) {
      y = height - diameter/2;
      vy *= -0.9; 
    } 
    else if (y - diameter/2 < 0) {
      y = diameter/2;
      vy *= -0.9;
    }
  }
  
  void display() {
    fill(colorh, colorb, colors);
    ellipse(x, y, diameter, diameter);
  }
}
</script><canvas width="700" height="400"></canvas></p>
<div style="height:0px;width:0px;overflow:hidden;"></div>

 <p>Press r (or R) for randomized colorations. Hold down r for a seizure.</p>
</body>
</html>
